<template>
    <view class="news">
		<!-- <image @click="fabuFn" class="jia" src="../../static/images/index/jia.png" mode=""></image> -->
		<image src="../../static/images/index/jiaggong.png" mode="" @click="fabuFn" class="jia"></image>
		<view class="bg-class">
			<image class="bg" src="../../static/images/index/bg.png" mode="widthFix"></image>
		</view>
		<view v-for="(item, index) in state.pages" :key="index">
		    <template v-if="item.name == 'banner'">
		        <w-banner class="swiper1" :content="item.content" :styles="item.styles" />
		    </template>
		</view>
        <!-- 搜索 -->
       <!-- <navigator class="input" url="/pages/search/search">
            <u-search placeholder="请输入关键词搜索" disabled :show-action="false" bg-color=" rgba(255,255,255,0.1)"></u-search>
        </navigator> -->
		<view class="input">
			<u-search placeholder="请输入供应关键词搜索" :show-action="true" bg-color=" rgba(255,255,255,0.1)" v-model="searchtext" @custom="customFn"></u-search>
		</view>
		    <view class="list-class">
		    	<block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
					<!-- <navigator :url="`/pages/collection/supply_details?id=${newsItem.id}&userId=${newsItem.user_id}`"> -->
					<view class="" @click.stop="tiaoz(newsItem.id)">
					    <view class="news-card  bg-white1 px-[20rpx] py-[32rpx]">
							<view class="news-card-top">
								<view class="">
									<!-- <image class="tou" src="../../static/images/tuo.png" mode=""></image> -->
									<image  class="tou" src="../../static/images/index/ge.png"></image>
									<image  class="tou" :src="newsItem.yonghu.avatar"></image>
								</view>
								<view class="qiyeming">
									{{newsItem.yonghu.nickname}}
								</view>
								<view class="zhiding1">
									<image v-if="newsItem.is_top==0" class="zhiding" src="../../static/images/zhidng.png" mode=""></image>
								</view>
							</view>
					       
						<view class="flex news-card-conter">
							<view class="mr-[20rpx]" v-if="newsItem.fming">
							    <u-image :src="newsItem.fming" width="220" height="200"></u-image>
							</view>
							<view style="width: 65%;">
								<view class="card-titel">{{ newsItem.name }}</view>
							
								<view class="gui">
									<view class="gui-item">
										库存地：
									</view>
									<view class="huanhang">
										{{newsItem.producer}}
									</view>
								</view>
								<view class="phone">
									<view class="">
										联系方式：
									</view>
									<view class="">
										{{newsItem.contacts[0].tel}}
									</view>
									<view class="phone_img" >
										<!-- <image src="../../static/images/phone.png" mode=""></image> -->
										<image style="width: 52rpx; height: 52rpx; padding:20rpx" src="../../static/images/phone.png" mode="" @click.stop="phoneFn(newsItem.contacts[0].tel)"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="news-card-bottom">
							<!-- 叶片广卵形或倒卵形，边缘有粗锯齿；花序是伞形，尊绿色，钟状；花瓣绿白色，花药卵形或矩圆形 -->
							{{newsItem.jjxq}}
						</view>
					    </view>
						</view>
					<!-- </navigator> -->
		    	</block>
		    </view>
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getArticleCate,getArticleList,getsuList } from '@/api/news'
import { getIndex } from '@/api/shop'
	import { useUserStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
const state = reactive<{
    pages: any[]
    article: any[]
}>({
    pages: [],
    article: []
})
const searchtext=ref('')
const tabList = ref<any>([])
const current = ref<number>(0)
const getData1 = async () => {
    const data = await getIndex()
    state.pages = JSON.parse(data?.page?.data)
    state.article = data.article
}

getData1()
onLoad(() => {
	queryList()
})
	const phoneFn=(tel:any)=>{
		console.log('打电话');
			let platform = uni.getSystemInfoSync().platform
			switch (platform) {
				case 'android':
					uni.showActionSheet({
					    itemList: [tel,'呼叫'],
					    success:function(res){
							console.log(res);
							if(res.tapIndex==1){
								plus.device.dial(tel,false)        
							}
					    },
					    complete: function(res) {
					       console.log("安卓失败",res)
					    }
					})
					break;
				case 'ios':
					// 使用uni-app提供的借口
					uni.makePhoneCall({
						phoneNumber: tel
		 
					})
					break;
				default:
	}
	}
const dataList=ref([])
const queryList = async () => {
    try {
        let data = await getsuList({})
		// console.log(data,'lists1111111111111111111');
		dataList.value=data.data
		dataList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
    } catch (e) {
        console.log('报错=>', e)
    }
}
const fabuFn=()=>{
	uni.navigateTo({
		url:'/pages/user/release'
	})
}
const customFn=async()=>{
	console.log('搜索');
	console.log(searchtext.value,'searchtext');
	try {
	    const { data } = await getsuList({
	      name:searchtext.value
	    })
		// console.log(lists,'lists1111111111111111111');
	    // paging.value.complete(lists)
		dataList.value=data
		dataList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		dataList.value.forEach(item=>{
			if(item.contacts.length!=0){
				item.contacts[0].tel=mobile(item.contacts[0].tel)
			}
			// item.contacts[0].tel=mobile(item.contacts[0].tel)
			// console.log(item);
		})
		
	} catch (e) {
	    console.log('报错=>', e)
	}
}
const tiaoz=(id)=>{
	// console.log();
	// if(isLogin.value){
		uni.navigateTo({
			url:'/pages/collection/supply_details?id='+id
		})
		console.log('111');
	// }else{
	// 	uni.navigateTo({
	// 		url:"/pages/login/login"
	// 	})
	// }

}
</script>

<style lang="scss" scoped>
	.phone_img{
		margin-left: auto;
		margin-top:-32rpx;
	}
	.news-card-bottom{
		margin-top: 16rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 36rpx;
		padding: 20rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 2;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
		height: 97rpx;
	}
	// .top-bottom {
	// 	width: 100%;
	// 	font-size: 24rpx;
	// 	font-family: PingFang SC, PingFang SC;
	// 	font-weight: 400;
	// 	color: #AAAAAA;
		
	// }
	.gui-item{
		// width: 22%;
		width: 100rpx;
	}
	.huanhang{
		flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
.news {
	position: relative;
	.jia{
		width: 98rpx;
		height: 98rpx;
		position: fixed;
		bottom: 292rpx;
		right: 18rpx;
		z-index: 2;
	}
    &-search {
        margin-bottom: 2rpx;
    }

    &-list {
        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
    }
}
.bg-class{
	width: 100%;
	.bg{
		width: 100%;
	}
}
.swiper1{
	position: absolute;
	top: 150rpx;
	// margin-left: 5%;
	// width: 90%;
	width: 100%;
	// height: 400rpx;
	// margin-bottom: 28rpx;
}
.input{
	position: absolute;
	top: 50rpx;
	width: 94%;
	margin-left: 3%;
	background: rgba(255,255,255,0.1);
	
height: 72rpx;
border: 3rpx solid #06BE7C;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.list-class{
	width: 94%;
	margin-left: 3%;
	margin-top: 150rpx;
}
.news-card {
    // border-bottom: 1px solid #f8f8f8;
	margin-bottom: 20rpx;
	
border-radius: 16rpx 16rpx 16rpx 16rpx;
    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
.card-titel{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #333333;
}
.gui{
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #777777;
	margin-top: 22rpx;
}
.phone{
	margin-top: 22rpx;
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.bg-white1{
	background-color: #fff;
}
.news-card-top{
	display: flex;
	height: 56rpx;
	line-height: 56rpx;
	padding-bottom: 16rpx;
	box-sizing: content-box;
	border-bottom: 2rpx solid #EEE;
	position: relative;
	.qiyeming{
		padding-left: 10rpx;
	}
	.tou{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
	}
	.zhiding1{
		position: absolute;
		right: -18rpx;
		bottom:0;
		.zhiding{
			width: 134rpx;
			height: 52rpx;
		}
	}
	
}
.news-card-conter{
	margin-top: 16rpx;
}

</style>
